/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import _ from 'lodash';
import Taro from '@tarojs/taro'
import {View} from '@tarojs/components'

// project
import CompBase from '../_/base';
import Base64 from '../../func/basis/base64';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class CSvg extends CompBase {

    /**
     * 使用外部css样式
     */
    static options = {
        addGlobalClass: true
    }
    
    /**
     * 初始化
     */
    constructor(props) {
        super(props);

        // Base公用属性
        this.props.abs; this.props.rel;
        this.props.zindex; this.props.top; this.props.bottom; this.props.left; this.props.right;
        this.props.f; this.props.w; this.props.h; this.props.lh; this.props.bg; this.props.opacity;
        this.props.ma; this.props.mt; this.props.mb; this.props.ml; this.props.mr; this.props.mx; this.props.my;
        this.props.pa; this.props.pt; this.props.pb; this.props.pl; this.props.pr; this.props.px; this.props.py;
        this.props.ba; this.props.bt; this.props.bb; this.props.bl; this.props.br; this.props.bx; this.props.by;
        this.props.ra; this.props.rt; this.props.rb; this.props.rl; this.props.rr;
        this.props.color; this.props.size; this.props.bold; this.props.align;
        this.props.df; this.props.dn; this.props.db; this.props.di;
        this.props.oh; this.props.oa; this.props.os;
        this.props.x; this.props.y;
        
        // 本组件额外添加属性

        // 初始化props
        this.init(this.props);
    }
    
	/**
     * 固定样式
     */
    getFixedStyles() {

        // 计算icon
        let icon = '';
        if (this.props.icon) {
            let temp = this.props.icon.replace('fill="#000000"', 'fill="' + this.props.color + '"');
            console.log(temp);
            icon = Base64.encode(temp);
        } else {
            icon = Base64.encode('<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1540265784485" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2153" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M465.442133 46.557867H325.8368C279.210667 46.557867 279.210667 0 325.8368 0h372.3264c46.557867 0 46.557867 46.557867 0 46.557867H558.557867S614.4 86.8352 614.4 179.950933V273.066667h409.6v136.533333L614.4 546.133333l-34.133333 341.333334 170.666666 89.975466V1024H273.066667v-46.557867L443.733333 887.466667 409.6 546.133333 0 409.6V273.066667h409.6V179.950933c0-93.047467 55.842133-133.393067 55.842133-133.393066z" fill="#000000" p-id="2154"></path></svg>');
        }

        // 返回
        return {
            backgroundSize: 'cover',
            backgroundImage: "url(\"data:image/svg+xml;base64, " + icon + "\")"
        };
    }
    
    /**
     * click事件处理器
     */
    handleOnClick() {
        if (this.props.onClick && _.isFunction(this.props.onClick)) {
           this.props.onClick(...arguments);
       }
   }

   /**
    * langPress事件处理器
    */
   handleOnLangPress() {
       if (this.props.onLangPress && _.isFunction(this.props.onLangPress)) {
           this.props.onLangPress(...arguments);
       }
   }

    /**
     * 渲染
     */
	render() {

        // 计算touchClass
        let className = 'touch-default';
        if (this.props.touchClass) className = 'touch-' + this.props.touchClass;

        // 渲染
		return (
            <View className={className} style={this.styles} onClick={this.handleOnClick} onLongPress={this.handleOnLangPress}></View>
		);
	}
}
